<div id="page-title">
<img src="<{$APPLICATION_URL}>/Themes/Default/Images/res-img/dynamic-pages.png" width="50" height="50" class="left-align service-icn " alt="Edit Static Pages">
	<h1 class="page-heading">User Payment Panel</h1>			
</div>
            
<div id="breadcrumb" class="transparent">
	<p> <img src="<{$APPLICATION_URL}>/Themes/Default/Images/res-img/home.png" class="home" alt="">
	<a href="<{$APPLICATION_URL}>/Browse/index" title="Slappit.com Homepage">Home</a> / 
	<a href="<{$APPLICATION_URL}>/Browse/MyAccount/index" title="Slappit.com User panel">Website Admin Panel</a> / 
	<a href="<{$APPLICATION_URL}>/Browse/Payment/index" title="Slappit.com Payment Panel">Payment Panel</a>
</div>  
<div id="main-content">            
	<article id="main-article">				
		
					<form action="<{$APPLICATION_URL}>/Browse/Payment/processpayment" method="post" id="payment-form">
					<ol class="forms">
						<li><p>
						<small>When you upgrade/downgrade your package, your current package will be cancelled.</small>
						</p></li>
						<!--  <li><label for="packageOptionId" style="padding-right:5px;width:150px;">Current Package:
							
						 </label>
						 <input type="text" value="<{$price}>"  style="width:50px;"/> (&pound)						
						</li>
						-->
						<li>
							<label for="selectpackage" style="padding-right:21px;width:150px;">Current Package:
							
						 	</label>
							<select name="packageOptionId" id="packageOptionId" onchange="packageChange(this.value);"> 
								<{foreach item=item from=$listPackages}>
								
									<option value="<{$item->id}>" <{if $id==$item->id}> selected="selected" <{/if}> > <{$item->name}> </option>
								<{/foreach}>
							</select>
						</li>
						<li>
							<label for="selectpackageprice" style="padding-right:22px;width:150px;">Current Price:  
							
						 	</label>
							<select name="selectpackageprice" id="selectpackageprice"  style="width:50px;"onchange="packageChange(this.value);"> 
								<{foreach item=item from=$listPackages}>
								
									<option value="<{$item->id}>" <{if $id==$item->id}> selected="selected" <{/if}> > <{$item->price}> </option>
								<{/foreach}>
							</select>(&pound)	
						</li>
						<li><label for="paymentMethod" style="padding-right:20px;width:150px;">Payment Method</label>
							<select name="paymentMethod" id="paymentMethod" >
								<{if $paypal_enable == "1"}>								
								<option value="Paypal" <{if $paymentMethod == "Paypal"}>selected="selected" <{/if}>>Paypal</option>		
								<{/if}>		
								<{if $checkout_enable == "1"}>									
								<option value="2Checkout" <{if paymentMethod == "2Checkout"}>selected="selected" <{/if}> >Credit Card</option>	
								<{/if}>
							</select>
						</li>
						<li><p><small>CHECK BOX TO REMOVE THE POWERED BY SLAPPIT.COM IN FOOTER <br/>(COST &pound5 PER MONTH)</small></p>						
						<input type="checkbox" id="brandFree" value="1" name="brandFree" <{if $brandFree == "1"}> checked="checked"<{/if}> style="width:5%; margin-left:20px;">Brand Free</li>
						<li><a id="login-form" class="silver-button" onclick="return processPaymentForm('true');">Order Now</a>&nbsp;&nbsp;<a id="login-form" class="silver-button" onclick="return processPaymentForm('false');">Cancel</a></li>													
						</ol>
						<input type="hidden" id="actionForm" name="actionForm" value=""/>
					 </form>
				<div class="clear"></div>
				
		
	</article>								
</div>

<script type="text/javascript">
function processPaymentForm(isCancel) {		
 	var checkResult = true;
 	var form = document.getElementById('payment-form');
	
 	if(form)
 	{
		if(isCancel == 'false')
		{
			form.actionForm.value = 'cancel';
		}
		else 
		{
			form.actionForm.value = '';
		}
		form.submit();	 	
		return true;
 	}
	
 	return false;
	}
 function packageChange(packageid)
 {
	 var form = document.getElementById('payment-form');
	 if(form)
	 {
		form.packageOptionId.value=packageid;
		form.selectpackageprice.value=packageid;
	 }
 }
</script> 